<template>
    <div class="container">
        <div class="login">
            <div class="login1">
                <div id="box">
                    <h3>高效记录生活</h3>
                    <h4>轻松收集，有效整理</h4>
                </div>
            </div>
            <div class="login2">
                <div id="loginbox">
                    <div id="title">
                        <img src="../assets/images/logo.png" alt="">
                        <span>欢迎登录</span>
                    </div>
                    <div id="form">
                        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                            label-width="auto" class="demo-ruleForm">
                            <el-form-item prop="pass">
                                <el-input v-model="ruleForm.username" type="text" autocomplete="off"
                                    style="height: 55px;margin-top: 40px;">
                                    <template #prefix>
                                        <el-icon class="el-input__icon">
                                            <User />
                                        </el-icon>
                                    </template></el-input>

                            </el-form-item>
                            <el-form-item prop="checkPass">
                                <el-input v-model="ruleForm.password" type="password" autocomplete="off"
                                    style="height: 50px;margin-top: 10px;">
                                    <template #prefix>
                                        <el-icon class="el-input__icon">
                                            <Lock />
                                        </el-icon>
                                    </template></el-input>
                            </el-form-item>
                            <el-form-item>
                                <div
                                    style="justify-content: space-around;display: flex;width: 100%;font-size: 20px;margin-top: 10px;">
                                    <el-checkbox style="font-size: 30px;" v-model="ruleForm.checked"><span
                                            style="font-size: 20px;">记住我</span></el-checkbox>
                                    <span style="color: blue;margin-left: 10px;">忘记密码？</span>
                                </div>

                            </el-form-item>
                            <el-form-item>
                                <div style="justify-content: space-around;display: flex;width: 100%;">
                                    <el-button @click="resetForm(ruleFormRef)"
                                        style="border-radius: 30px;width: 180px;height: 45px;font-size: 20px;margin-top: 10px;" :icon="Warning">
                                        重置</el-button>
                                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                                        style="background-color: #4060c7;border-radius: 30px;width: 180px;height: 45px;font-size: 20px;margin-top: 10px;" :icon="UserFilled">
                                        登录
                                    </el-button>
                                </div>


                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { User, Lock,UserFilled ,Warning} from '@element-plus/icons-vue'
import { user_Login } from '@/request';
import router from '@/router';  
const ruleFormRef = ref<FormInstance>()



const checkUser = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名！'))
    } callback()
}
const checkPass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码！！！'))
    } callback()
}

const ruleForm = reactive({
    username: '',
    password: '',
    checked:false
})

const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: checkUser, trigger: 'blur' }],
    password: [{ validator: checkPass, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
            user_Login(ruleForm).then((res)=>{
               if(res.data.code===200){
                 ElMessage.success('登录成功！')
                 if(ruleForm.checked){
                    localStorage.setItem('loginForm',JSON.stringify(ruleForm))
                 }else{
                    localStorage.setItem('loginForm',JSON.stringify({}))
                 }
               
                localStorage.setItem('token',res.data.token)
                localStorage.setItem('users',JSON.stringify(res.data.users))
                localStorage.setItem('router',JSON.stringify(res.data.router))
                 router.push('/')
               }else{
                ElMessage.error('登录失败！！！')
               }
            })
        } else {
            console.log('error submit!')
        }
    })
}

function onKeyUp(e){
    if(e.key=="Enter") submitForm()
}

onMounted(()=>{
    if(localStorage.getItem('loginForm')!=null&&Object.keys(localStorage.getItem("loginForm")).length>2){
        ruleForm.checked=true;
        var userPwdInfo=JSON.parse(localStorage.getItem('loginForm'));
        ruleForm.username=userPwdInfo.username;
        ruleForm.password=userPwdInfo.password
    }else{
        ruleForm.checked=false
    }
    document.addEventListener("keyup",onKeyUp)
})

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 30px 30px;

    .login {
        width: 100%;
        height: 95%;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 90px 30px 20px 30px;
        display: flex;

        .login1 {
            width: 60%;
            height: 90%;
            // background-color: #fcc;
            margin-right: 40px;
            position: relative;
            background-image: url('../assets/images/login.png');
            background-repeat: no-repeat;
            background-size: 90% 100%;

            #box {
                position: absolute;
                top: 60px;
                left: 60px;
                width: 300px;
                height: 90px;
                line-height: 10px;

                // background-color: rgb(150, 150, 192);
                h3 {
                    font-size: 45px;
                    line-height: 35px;
                }
            }
        }

        .login2 {
            width: 34%;
            height: 90%;
            // background-color: #fac;
            padding: 30px;

            #loginbox {
                width: 650px;
                height: 750px;
                border-radius: 20px;
                background-color: rgba(255, 255, 255, 0.7);
                box-shadow: 5px 5px 15px 5px rgba(194, 191, 191, 0.6);
                padding: 55px;

                #title {
                    width: 100%;
                    height: 15%;
                    // background-color: #fcc;
                    text-align: center;
                    line-height: 70px;

                    img {
                        width: 80px;
                        height: 50px;
                    }

                    span {
                        font-weight: bold;
                        color: blue;
                        font-size: 35px;
                        display: inline-block;
                        line-height: 40px;
                        margin-left: 20px;
                        padding-top: 10px;
                    }
                }

                #form {
                    width: 100%;
                    height: 550px;
                    // background-color: #fca;
                }
            }
        }
    }
}
</style>
